<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="//player.polyv.net/jssdk/polyv-chatroom.min.css"
    />
    <title>直播-无延迟</title>
  </head>
  <body>
    <div id="ppt" style="width: 500px; height: 180px"></div>
    <div id="player" style="width: 500px; height: 230px"></div>
    <div id="wrap" style="width: 500px; height: 350px"></div>
    <script src="//cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.min.js"></script>
    <script src="//libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="//player.polyv.net/livesdk/polyv-live.min.js"></script>
    <script src="//player.polyv.net/jssdk/polyv-chatroom.min.js"></script>
    <script>
      var chatroom = null;
      var liveSdk = null;
      window.onload = function () {
		//参数开始
        var appSecret = "";
        var appId = "";
        var channelId = "";
		//参数结束
        var userId = "test-001"
        var chatData = getChatToken(); //从接口获取聊天室信息
        //第一步：初始化聊天室
        chatroom = new PolyvChatRoom({
          roomId: channelId,
          userId: userId,
          nick: "游客",
          pic: "http://livestatic.videocc.net/assets/wimages/missing_face.png",
          token: chatData.token,
          mediaChannelKey: chatData.mediaChannelKey,
          version: "2.0",
          container: "#wrap",
          width: 500,
          height: 300,
          userType: "slice",
          roomMessage: function (data) {
            // data为聊天室socket消息，当有聊天室消息时会触发此方法
            console.log(data);
          },
        });
        var params = {
          appId: appId,
          channelId: channelId,
          timestamp: new Date().getTime(),
        };
        var sign = getSign(params);
        //第二步：初始化直播sdk对象
        var liveSdk = new PolyvLiveSdk({
          channelId: channelId,
          sign: sign, // 频道验证签名
          timestamp: params.timestamp, // 毫秒级时间戳
          appId: appId, // polyv 后台的appId
          socket: chatroom.chat.socket,
          user: {
            userId: userId,
            userName: "polyv-test",
            pic: "//livestatic.videocc.net/assets/wimages/missing_face.png",
          },
        });

        // 监听频道信息并初始化播放器
        liveSdk.on(PolyvLiveSdk.EVENTS.CHANNEL_DATA_INIT, (event, data) => {
          //第三步：设置直播播放器
          liveSdk.setupPlayer({
            pptEl: "#ppt",
            el: "#player",
            type: "auto",
            controllerPosition: "ppt",
            pptNavBottom: "80px",
            autoplay: true,
          });
        });
        /***函数****/
        function getSign(params) {
          var paramsStr = "";
          $.each(params, function (key, val) {
            paramsStr += key + "" + val;
          });
          var finalStr = appSecret + paramsStr + appSecret;
          return md5(finalStr).toUpperCase();
        }
        function getChatToken() {
          var chatData = {};
          var apiUrl =
            "http://api.polyv.net/live/v3/channel/common/get-chat-token";
          var params = {
            appId: appId, // 账号appId
            channelId: channelId, // 频道号
            role: "viewer", // 角色,iewer：观看者
            timestamp: new Date().getTime(),
            userId: "test-001", // 观看者用户Id
          };
          params.sign = getSign(params);
          $.ajax({
            url: apiUrl,
            type: "POST",
            async: false,
            data: params,
            success: (data) => {
              chatData = data.data;
            },
          });
          return chatData;
        }
      };
    </script>
  </body>
</html>
